<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="5">
            <div
              class="grid-content ep-bg-purple"
              style="text-align: center; line-height: 60px"
            >
              <h2>
                <span style="color: dodgerblue">企业服务官网</span
                ><span style="color: darkgray">模板</span>
              </h2>
            </div>
          </el-col>
          <el-col :span="19">
            <div
              class="left-folt grid-content ep-bg-purple-light"
              style="text-align: right"
            >
              <el-menu
                router
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
              >
                <el-menu-item index="/Home1">首页</el-menu-item>
                <el-menu-item index="/Product">产品服务</el-menu-item>
                <el-menu-item index="/Customer">客户案例</el-menu-item>
                <el-menu-item index="/Member">会员中心</el-menu-item>
                <el-menu-item index="/About">关于我们</el-menu-item>
              </el-menu>
            </div>
          </el-col>
        </el-row></el-header
      >
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
<style scoped>
/* .el-header {
  position: fixed;
} */
.left-folt {
  padding-right: 50px;
  display: flex;
  justify-content: flex-end;
}
.el-menu--horizontal {
  width: 100%;
  justify-content: flex-end;
  gap: 20px;
  padding-right: 30px;
}
:deep(.el-menu.el-menu--horizontal) {
  border-bottom: none;
}
.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}
</style>
